<template>
    <div class="mobile-screen-box">
        <img class="mobile-header-img" src="../../assets/mobile_header.png">
        <img class="wx-mp-footer-img" src="../../assets/wx_mp_menu_footer.png">
        <div class="first-menu-box g-flex">
            <template v-if="menu">
                <template v-for="(firstItem,firstIndex) in menu">
                    <div class="first-menu-button-box g-flex-direction-c g-flex-align-end" :key="firstIndex">
                        <div class="second-menu-box">
                            <el-button class="g-width100 first-menu-button" icon="el-icon-plus" @click="addSecondMenu(firstIndex)" v-if="!firstItem.sub_button || !firstItem.sub_button.list || firstItem.sub_button.list.length < maxSecondMenuNum" size="mini"></el-button>
                            <template v-if="firstItem.sub_button && firstItem.sub_button.list">
                                <template v-for="(secondItem,secondIndex) in firstItem.sub_button.list">
                                    <el-button class="g-width100 first-menu-button" size="mini" :key="secondIndex" @click="localMenuButtonClick(firstIndex,secondIndex)">{{secondItem.name}}</el-button>
                                </template>
                            </template>
                        </div>
                        <el-button class="g-width100 first-menu-button" icon="el-icon-more-outline" size="mini" @click="localMenuButtonClick(firstIndex)">{{firstItem.name}}</el-button>
                    </div>
                </template>
            </template>
            <template v-if="maxFirstMenuNum - firstMenuNum > 0">
                <div class="first-menu-button-box g-flex-direction-c g-flex-align-end">
                    <el-button class="g-width100 first-menu-button" icon="el-icon-plus" size="mini" @click="addFirstMenu"></el-button>
                </div>
            </template>

        </div>
    </div>
</template>

<script>
    export default {
        components:{
        },
        name: "MpMenu",
        props:{
            buttons:{
                type: Array,
                default: function () {
                    return []
                }
            },
            showAddButton:{
                type: Boolean,
                default: true
            },
            menuButtonClick:{
                type: Function,
                default: function () {

                }
            }
        },
        computed:{
            firstMenuNum(){
                let r = 0;
                if(this.menu){
                    r = this.menu.length
                }
                return r
            }
        },
        data(){
            return {
                maxFirstMenuNum: 3,
                maxSecondMenuNum: 5,
                menu: this.buttons,
                selectedMenuItem: {
                    firstIndex: null,
                    secondIndex: null,
                    menuItem: null
                },
            }
        },
        mounted(){
        },
        methods:{
            // 确保一级菜单依赖的父属性存在
            ensureButtonsExist(){
                if(!this.menu){
                    this.menu = []

                }
            },
            // 确保二级菜单依赖的父属性存在
            ensureSubButtonsExist(firstMenuIndex){
                this.ensureButtonsExist()
                let buttonsSize = this.menu.length
                if(buttonsSize < firstMenuIndex + 1){
                    this.menu.push({
                        sub_button: {
                            list: []
                        }
                    })
                }else{
                    let firstButton = this.menu[firstMenuIndex]
                    if(firstButton.sub_button){
                        if(!firstButton.sub_button.list){
                            firstButton.sub_button.list = []
                            this.menu.splice(firstMenuIndex,1,firstButton)
                        }
                    }else{
                        firstButton.sub_button = {
                            list: []
                        }
                        this.menu.splice(firstMenuIndex,1,firstButton)
                    }
                }
            },
            // 添加一级菜单
            addFirstMenu(){
                this.ensureButtonsExist()
                let buttons = this.menu
                buttons.push({
                    name: '一级菜单' + (buttons.length + 1),
                    "type": null,
                    "key": null,
                    "url": null,
                    "value": null,
                    "appid": null,
                    "pagepath": null,
                    "sub_button": null,
                    "media_id": null,
                    "news_info": null
                })
                this.localMenuButtonClick(buttons.length - 1)
            },
            // 添加二级菜单
            addSecondMenu(firstMenuIndex){
                this.ensureSubButtonsExist(firstMenuIndex)
                let firstButton = this.menu[firstMenuIndex]
                firstButton.sub_button.list.push({
                    name: '二级菜单' + firstMenuIndex + (firstButton.sub_button.list.length + 1),
                    "type": null,
                    "key": null,
                    "url": null,
                    "value": null,
                    "appid": null,
                    "pagepath": null,
                    "sub_button": null,
                    "news_info": null
                })
                this.menu.splice(firstMenuIndex,1,firstButton)
                this.localMenuButtonClick(firstMenuIndex,firstButton.sub_button.list.length - 1)
            },
            // 菜单按钮点击选择
            localMenuButtonClick(firstIndex,secondIndex){
                this.selectedMenuItem.firstIndex = firstIndex
                this.selectedMenuItem.secondIndex = secondIndex
                let temp = this.menu[firstIndex]
                if(secondIndex != undefined && secondIndex != null){
                    temp = temp.sub_button.list[secondIndex]
                }
                this.selectedMenuItem.menuItem = temp
                this.menuButtonClick(this.selectedMenuItem)
                this.$emit('onMenuItemSelect',this.selectedMenuItem)
            },
            getButtons(){
                return this.menu
            }
        },
        watch:{
            buttons(val){
                this.menu = val
            },
            menu(val){
                this.$emit('buttonsChange',val)
            }
        }
    }
</script>

<style scoped>
    .mobile-screen-box{
        height: 500px;
        width: 320px;
        position: relative;
    }
    .mobile-header-img{
        border: none;
        position: absolute;
        left: 0px;
        top: 0px;
    }
    .wx-mp-footer-img{
        border: none;
        position: absolute;
        left: 0px;
        bottom: 0px;
    }
    .first-menu-box{
        position: absolute;
        width: 275px;
        left: 44px;
        bottom: 0px;

    }
    .first-menu-button-box{
        flex-grow: 1;
    }
    .first-menu-button{

        height: 50px;
        padding-left: 7px;
        padding-right: 7px;
        margin-left: 0px;
    }
    .second-menu-box{
        margin-bottom: 10px;
    }

</style>